<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-box {
            margin: 20px;
            padding: 20px;
            border: 2px solid #3498db;
            background-color: #f8f9fa;
        }

        .grid-container {
            display: grid;
            gap: 10px;
            background-color: #ecf0f1;
            padding: 10px;
            margin: 10px 0;
        }

        .grid-item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
        }

        /* 基础网格示例 */
        .basic-grid {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        /* 网格区域示例 */
        .grid-areas {
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            grid-template-columns: 200px 1fr 1fr;
            grid-template-rows: 100px 200px 100px;
        }

        .header { grid-area: header; background-color: #e74c3c; }
        .sidebar { grid-area: sidebar; background-color: #2ecc71; }
        .main { grid-area: main; background-color: #3498db; }
        .footer { grid-area: footer; background-color: #9b59b6; }

        /* 网格间距示例 */
        .grid-gap {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            gap: 20px;
        }

        /* 网格对齐示例 */
        .grid-alignment {
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(2, 100px);
            justify-content: center;
            align-content: center;
            height: 300px;
        }

        /* 自动网格示例 */
        .auto-grid {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            grid-auto-rows: 100px;
        }

        /* 网格跨度示例 */
        .grid-span {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
        }

        .span-col-2 {
            grid-column: span 2;
            background-color: #e74c3c;
        }

        .span-row-2 {
            grid-row: span 2;
            background-color: #2ecc71;
        }

        .description {
            margin: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            line-height: 1.6;
        }

        .controls {
            margin: 10px 0;
        }

        button {
            padding: 5px 10px;
            margin: 5px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #2980b9;
        }

        /* 响应式布局示例 */
        @media (max-width: 600px) {
            .grid-areas {
                grid-template-areas:
                    "header"
                    "sidebar"
                    "main"
                    "footer";
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Grid布局详解</h1>

        <section>
            <h2>1. 基础网格</h2>
            <div class="description">
                使用grid-template-columns和grid-template-rows创建基本网格布局。
            </div>
            <div class="demo-box">
                <div class="grid-container basic-grid">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                    <div class="grid-item">7</div>
                    <div class="grid-item">8</div>
                    <div class="grid-item">9</div>
                </div>
            </div>
        </section>

        <section>
            <h2>2. 网格区域</h2>
            <div class="description">
                使用grid-template-areas定义网格区域布局。
            </div>
            <div class="demo-box">
                <div class="grid-container grid-areas">
                    <div class="grid-item header">Header</div>
                    <div class="grid-item sidebar">Sidebar</div>
                    <div class="grid-item main">Main Content</div>
                    <div class="grid-item footer">Footer</div>
                </div>
            </div>
        </section>

        <section>
            <h2>3. 网格间距</h2>
            <div class="description">
                使用gap属性设置网格项之间的间距。
            </div>
            <div class="demo-box">
                <div class="grid-container grid-gap">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>
        </section>

        <section>
            <h2>4. 网格对齐</h2>
            <div class="description">
                使用justify-content和align-content控制网格的对齐方式。
            </div>
            <div class="demo-box">
                <div class="grid-container grid-alignment">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>
        </section>

        <section>
            <h2>5. 自动响应式网格</h2>
            <div class="description">
                使用auto-fit和minmax()创建自动响应式网格。
            </div>
            <div class="demo-box">
                <div class="grid-container auto-grid">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item">4</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                </div>
            </div>
        </section>

        <section>
            <h2>6. 网格跨度</h2>
            <div class="description">
                使用grid-column和grid-row控制网格项的跨度。
            </div>
            <div class="demo-box">
                <div class="grid-container grid-span">
                    <div class="grid-item span-col-2">跨越2列</div>
                    <div class="grid-item">3</div>
                    <div class="grid-item span-row-2">跨越2行</div>
                    <div class="grid-item">5</div>
                    <div class="grid-item">6</div>
                    <div class="grid-item">7</div>
                    <div class="grid-item">8</div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
